<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo01</title>
    <style type="text/css">
    .box{ width: 100%; height: 1000px; border: 1px solid #8841AB; }
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="box">
        <div class="grey grey11">11</div>
        <div class="grey grey12">22</div>
        <div class="grey grey13">33</div>
    </div>
    <div class="box box1">
        <div class="grey grey11">11</div>
        <div class="grey grey12">22</div>
        <div class="grey grey13">33</div>
    </div>
    <div class="box box2">
        <div class="grey grey21">11</div>
        <div class="grey grey22">22</div>
        <div class="grey grey23">33</div>
    </div>
    <div class="box box3">
        <div class="grey grey31">11</div>
        <div class="grey grey32">22</div>
        <div class="grey grey33">33</div>
    </div>
    
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>

<script type="text/javascript">
gsap.registerPlugin(ScrollMagic)
//const controller = new ScrollMagic.Controller();
// const scene1 = new ScrollMagic.Scene({
//     triggerElement: ".box2",
//     triggerHook: "onLeave",
//     duration: "400%"
// });
const timeline = gsap.timeline({
    scrollTrigger: {
        trigger: '.box2',
        scrub: 1,
        pin: true,
        start: "top top+=1241",
        //toggleActions: "play pause resume reset",
        pin: '.box2',
        //start: `top top`,
    }
}).to(".grey21", {x: 100}).to(".grey22", {x: 200})
</script>
</html>
